<template>
    <div class="tree-list-layout">
        <div class="folder root">
            <div class="folder-name isRoot">
                <div class="folder-title" slot="reference" style="left:10px">根目录</div>
                <div class="folderSetting isRoot">
                    <div class="folderSettingItem">
                        <i class="el-icon-folder-add" @click="addFolder"></i>
                    </div>
                    <div class="folderSettingItem" @click="hiddenAllFolder">
                        <i class="el-icon-remove-outline"></i>
                    </div>
                    <div class="folderSettingItem" @click="refresh">
                        <i class="el-icon-refresh"></i>
                    </div>
                </div>
            </div>
            <div class="moveLineBox" v-if="markSetting.status">
                <div class="intoFolder" style="top :0px;height:100%;" @mouseover.stop="mouseover('intoFolder')" @mouseout.stop="mouseout"></div>
            </div>
            <div class="folderRoot" ref="treeScroll">
                <div class="folder-list">
                    <folder v-for="item in tree.folderList" :key="item.id" :folderValue="item"></folder>
                </div>
                <div class="folder-api">
                    <file v-for="item in tree.docList" :key="item.id" :apiValue="item">
                    </file>
                </div>
                <div class="empty" v-if="!tree.folderList.length && !tree.docList.length">(空)</div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import file from "./file";
import folder from "./folder";

export default {
    components: {
        folder,
        file
    },
    computed: {
        ...mapState("doc_tree", {
            DOC_ACTIVE_ID: state => state.DOC_ACTIVE_ID,
            tree: state => state.tree,
            markSetting: state => state.markSetting,
        }),
    },
    mounted() {
        this.$store.dispatch('doc_tree/setTreeRef', this.$refs.treeScroll);
        this.$store.dispatch('doc_tree/getRenderData');
    },
    methods: {
        mouseover() {
            this.$store.dispatch('doc_tree/setMoveValue', {
                type: 'intoFolder',
                value: this.tree,
                moveValueType: 'folder'
            });
        },
        mouseout() {
            if (this.markSetting.status) {
                this.$store.dispatch('doc_tree/setMoveOut');
            };
        },
        refresh() {
            this.$store.dispatch('doc_tree/getRenderData');
        },
        hiddenAllFolder() {
            this.$store.dispatch('doc_tree/closeAllFolder');
        },
        addFolder() {
            this.$store.dispatch('doc_tree/setFolderEdit', {
                value: this.tree,
                type: 'newFolder'
            });
        },
    },
}
</script>

<style>

</style>